<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>无标题文档</title>



<script src="/js/vue.min.js"></script>

<script src="/elementui/index.js"></script>
<link href="/elementui/index.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="/js/axios.min.js"></script>
<link href="/css/layui.css" rel="stylesheet" type="text/css">
<link href="/css/base.css" rel="stylesheet" type="text/css">
</head>

<body style="margin: 13px;">
  <div id="loginDiv">
	<template>
		<span>姓名：</span><input type="text" v-model.trim="xingming" size="17"/>
		<span>联系电话：</span><input type="text" v-model.trim="dianhua" size="17"/>
		<input type="button" value="查询" @click="renyuanRes()" class="lanse" style="width: 86px;"/>
	</template>
	<table class="layui-table">
    <thead>
      <tr>
		<th>序号</th>
		<!-- <th>账号</th>
		<th>密码</th> -->
		<th>姓名</th>

		<th>性别</th>
		<th>救助次数</th>
<!--		<th>地址</th>-->
<!--		<th>联系电话</th>-->

		<th>详细事迹</th>
		<th>照片</th>
		<th>添加时间</th>
          <th style="width: 120px;">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(renyuan, index) in xianshilist" :key="renyuan.id">
		<td>{{index+1}}</td>
		<!-- <td>{{renyuan.username}}</td>
		<td>{{renyuan.password}}</td> -->
		<td>{{renyuan.xingming}}</td>

		<td>{{renyuan.xingbie}}</td>
		<td>{{renyuan.nianling}}</td>
<!--		<td>{{renyuan.dizhi}}</td>-->
<!--		<td>{{renyuan.dianhua}}</td>-->

          <td class="break-by-char">{{renyuan.youxiang}}</td>
		<td><img :src= "renyuan.fujian" style="height: 130px;height: 130px;"/></td>
		<td>{{renyuan.shijian}}</td>
          <td style="display: flex; gap: 5px;">
              <input type="button" value="编辑" class="lvse" @click="edit(renyuan)" style="width: 66px;"/>
              <input type="button" value="删除" class="hongse" @click="del(renyuan.id)" style="width: 66px;"/>
          </td>
      </tr>
    </tbody>
    </table>

	<el-pagination background
		 layout="total, prev, pager, next"
		 :total="total"
		 :page-size="pageSize"
		 :current-page="currentPage"
		 @current-change="handleCurrentChange">
	</el-pagination>

	<input type="button" value="添加志愿者" class="lanse" onclick="renyuanAdd()" style="width: 99px;"/>

    <el-dialog title="编辑" :visible.sync="dialogrenyuanEdit" width="60%">
	<table width="100%"  border="0" cellpadding="8" cellspacing="1" bgcolor="#CBD8AC">
                                        <tr bgcolor="#FFFFFF" style="height: 43px;">
                                            <td width="65" bgcolor="#FFFFFF" align="right">
                                                姓名：
                                            </td>
                                            <td bgcolor="#FFFFFF" align="left">
                                                &nbsp;<input type="text" v-model="renyuan.xingming" style="width: 288px;"/>
                                            </td>
                                        </tr>
                                        <tr bgcolor="#FFFFFF" style="height: 43px;">
                                            <td width="65" bgcolor="#FFFFFF" align="right">
                                                性别：
                                            </td>
                                            <td bgcolor="#FFFFFF" align="left">
                                                &nbsp;<input type="radio" v-model="renyuan.xingbie" value="男" style="border: 0px;"/>男
                                                &nbsp;&nbsp;
                                                &nbsp;<input type="radio" v-model="renyuan.xingbie" value="女" style="border: 0px;"/>女

                                            </td>
                                        </tr>
                                        <tr bgcolor="#FFFFFF" style="height: 43px;">
                                            <td width="65" bgcolor="#FFFFFF" align="right">
                                                救助次数：
                                            </td>
                                            <td bgcolor="#FFFFFF" align="left">
                                                &nbsp;<input type="text" v-model="renyuan.nianling" style="width: 288px;"
                                                onkeyup="value=value.replace(/[^\d]/g,'') "
                                                onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"/>
                                            </td>
                                        </tr>
<!--                                        <tr bgcolor="#FFFFFF" style="height: 43px;">-->
<!--                                            <td width="65" bgcolor="#FFFFFF" align="right">-->
<!--                                                住址：-->
<!--                                            </td>-->
<!--                                            <td bgcolor="#FFFFFF" align="left">-->
<!--                                                &nbsp;<input type="text" v-model="renyuan.dizhi" style="width: 388px;"/>-->
<!--                                            </td>-->
<!--                                        </tr>-->
<!--                                        <tr bgcolor="#FFFFFF" style="height: 43px;">-->
<!--                                            <td width="65" bgcolor="#FFFFFF" align="right">-->
<!--                                                电话：-->
<!--                                            </td>-->
<!--                                            <td bgcolor="#FFFFFF" align="left">-->
<!--                                                &nbsp;<input type="text" v-model="renyuan.dianhua" style="width: 288px;"/>-->
<!--                                            </td>-->
<!--                                        </tr>-->
                                        <tr bgcolor="#FFFFFF" style="height: 43px;">
                                            <td width="65" bgcolor="#FFFFFF" align="right">
                                                详细事迹：
                                            </td>
                                            <td bgcolor="#FFFFFF" align="left">
                                                &nbsp;<input type="text" v-model="renyuan.youxiang" style="width: 288px;"/>
                                            </td>
										</tr>
										<tr bgcolor="#FFFFFF" style="height: 38px;">
											<td width="65" bgcolor="#FFFFFF" align="right">
												照片上传：
											</td>
											<td bgcolor="#FFFFFF" align="left">
												<input type="text" size="60" readonly="readonly" v-model="renyuan.fujian"/><br/>
												<input type="file" ref="fileRef" accept="*" @change="handleFileChange($event)"/>
												<input type="button" value="上传" style="width: 66px;" @click="upload()"/>
											</td>
										</tr>
                                        <tr bgcolor="#FFFFFF" height="30">
                                            <td width="65" bgcolor="#FFFFFF" align="right">
                                                &nbsp;
                                            </td>
                                            <td bgcolor="#FFFFFF" align="left">
                                            &nbsp;<input type="button" value="提交" @click="renyuanUpdate()" style="width: 70px;"/>&nbsp;
                                            </td>
                                        </tr>
                                     </table>
	</el-dialog>



  </div>



<script type="text/javascript">
    function renyuanAdd()
	{
		var url="../renyuan/renyuanAdd.html";
		window.location.href=url;
	}

	var vm = new Vue({

		el: '#loginDiv',
		data:
		{
			total:0,
			pageSize:2,
			currentPage:1,//当前页

			renyuanList:[],
			xianshilist: null,

			dialogrenyuanEdit:false,
			renyuan:{

			},

			file:"",

			/* 查询用的 */
			xingming:"",
			dianhua:"",

		},
		methods:
		{
			getData()
			{
               axios({
						method: 'POST',
						url: '/renyuanMana',
						params:{

						}
						}).then(data => {
							if (data.data.state == 66)
							{
								this.renyuanList=data.data.data;
								this.total=this.renyuanList.length;

	                            this.xianshilist = this.renyuanList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
							}

						}).catch(error => {
							alert(error);
			    })
			},

			handleCurrentChange(currentPage)//用户点的页码
			{
				var _this = this;
				if (_this.renyuanList)
				{
				   if (currentPage)
				   {
                      _this.currentPage = currentPage;
                   }
                   _this.xianshilist = _this.renyuanList.slice((_this.currentPage - 1) * _this.pageSize,_this.currentPage * _this.pageSize);
                } else {}

			},



			edit(renyuan)
			{
				this.renyuan={...renyuan};
				this.dialogrenyuanEdit=true;
			},

			renyuanUpdate()
			{
				axios({
						method: 'POST',
						url: '/renyuanUpdate',
						data: this.renyuan,
						/* params:{
							dianhua:this.renyuan.dianhua,
							password:this.renyuan.renyuanPw,
						} */
						}).then(data => {
							if (data.data.state == 66)
							{
								alert("修改成功");
								this.dialogrenyuanEdit=false;
								this.getData();
							}

						}).catch(error => {
							alert(error);
						})
			},

			del(id)
			{
				if(confirm('您确定删除吗？'))
				{
					axios({
						method: 'POST',
						url: '/renyuanDel',
						//data: this.renyuan,
						params:{
							id:id,
						}
						}).then(data => {
							if (data.data.state == 66)
							{
								alert("删除成功");
								this.currentPage=1;
								this.getData();
							}

						}).catch(error => {
							alert(error);
					})
				}
			},

			renyuanRes()
			{
				axios({
						method: 'POST',
						url: '/renyuanRes',

						params:{
							xingming:this.xingming,
							dianhua:this.dianhua,
						}
						}).then(data => {
							if (data.data.state == 66)
							{
								this.renyuanList=data.data.data;
								this.total=this.renyuanList.length;

	                            this.xianshilist = this.renyuanList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
							}

						}).catch(error => {
							alert(error);

				})
				this.currentPage=1;
			},


			handleFileChange(event)
			{
				this.file = event.target.files[0];
			},

			upload()
			{
				/* if(this.$refs.fileRef.value=="") */
				if(this.file=="")
				{
					alert("请选择文件");
					return false;
				}

				let formFile = new FormData();
				formFile.append("file", this.file);

                axios({
						method: 'POST',
						url: '/upload',
						data: formFile,
						/* params:{
							username:this.xinwen.userName,
							password:this.xinwen.userPw,
						} */
						}).then(data => {
							if (data.data.state == 66)
							{
								alert("上传成功");
								this.file='';
								var fujian=data.data.data;
								this.renyuan.fujian=fujian.fujian;
							}
						}).catch(error => {
							alert(error);
				})


			},


		},
		created()
		{
			this.getData();
		}



	})
</script>


<style>
    .el-pagination{
		text-align: right;
		padding-top: 20px;
	}
    .layui-table td {
        white-space: normal;
        overflow-wrap: break-word;
    }
    .break-by-char {
        word-break: break-all;
    }
</style>

</body>
</html>
